<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>MARRIAGE</title>
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/axios-0.18.0.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>

<style>
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #ffffff;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #ffffff;
        color: #333;
        text-align: center;
        line-height: 800px;
        padding-top: 50px;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
</style>


<body>

<div id="app">
    <el-container>
        <el-header style="background-color: #111111;color: white;position: relative;">
            <a th:href="@{/users/toLoveGuideListPage}" style="color: white;text-decoration: none;position: absolute;left: 20px;"><i class="el-icon-arrow-left"></i>返回</a>
            恋爱指导详情
            <a @click="suaxin()" style="color: white;text-decoration: none;float: right;margin-left: 10px"><i class="el-icon-refresh"></i>刷新</a>&nbsp;&nbsp;&nbsp;&nbsp
            <a th:href="@{/users/toIndex}" style="color: white;text-decoration: none;float: right;"><i class="el-icon-s-home"></i>首页</a>&nbsp;&nbsp;&nbsp;&nbsp
        </el-header>
        <el-header style="height: 200px;background-color:#cdcdcd;padding-top: 60px">
            <span style="font-size:30px;font-weight: bold">[[${guidance?.guidanceTitle}]]</span>
            <span >收藏 {{number}} 次</span>
            <br/>
            <span>[[${guidance?.guidanceAuthor}]]&nbsp;&nbsp;于&nbsp;&nbsp;[[${guidance?.guidanceTime}]]&nbsp;&nbsp;发布</span>
            <el-button round
                    v-if="favor == '1'?true:false"
                       @click="deleteFavorite()"
                    style="position: absolute;right:100px;font-size:20px"><i class="el-icon-star-on" style="color:yellow;"></i>已收藏</el-button>
            <el-button round
            v-if="favor ==' 0'?true:false"
                       @click="addFavorite()"
            style="position: absolute;right:100px;font-size:20px"><i class="el-icon-star-off" style="color:grey;"></i>未收藏</el-button>
        </el-header>
        <el-container>
            <el-aside width="100px">
            </el-aside>
            <el-main text-align="center">
                <span><el-input  type="textarea" th:value="${guidance?.guidanceContent}" readonly style="font-size: 25px;":autosize="{ minRows: 3, maxRows: 350}"/></span>
            </el-main>
            <el-aside width="100px">
            </el-aside>
        </el-container>
        <el-footer style="background-color:#202329 ;color: white;"><!--系统公司信息-->
            <p style="margin-bottom: 20px" >© 2022 Match Marriage All rights reserved | Design by
                <a href="https://blog.csdn.net/qq_45839699?type=sub&subType=watch" style="color: white"> ZJ.</a>
            </p>
        </el-footer>
    </el-container>
</div>

</body>
<script>
    var guidanceId=[[${guidance?.guidanceId}]]
    new Vue({
        el: "#app",
        data(){
            return {
                favor:'',
                number:'',
            }
        },
        mounted(){
            var _this=this
            axios({
                headers:{'Content-Type':'application/json;charset=utf8'},
                method:"get",
                url:"/favorites/findUserAndGuidance",
            }).then(function(response) {
                _this.favor = response.data;
            });
            axios({
                headers:{'Content-Type':'application/json;charset=utf8'},
                method:"post",
                url:"/favorites/findGuidanceByIdNumbers",
                data:guidanceId
            }).then(function(response) {
                _this.number = response.data;
            });
        },
        methods: {
            suaxin(){
                location.reload();
            },
            deleteFavorite(){
                var _this = this;
                axios({
                    headers:{'Content-Type':'application/json;charset=utf8'},
                    method:"get",
                    url:"/favorites/delGuidanceFavorites",
                }).then(function(response) {
                });
                location.reload(true);
            },
            addFavorite(){
                var _this = this;
                axios({
                    headers:{'Content-Type':'application/json;charset=utf8'},
                    method:"get",
                    url:"/favorites/addGuidanceFavorites",
                }).then(function(response) {
                });
                location.reload(true);
            }
        }

    })

</script>
</html>
